const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const { getEntries, ROOT_PATH, APP_PATH } = require("./entry")
const { getPlugins } = require("./plugins")
const config = require("../config/env")
const IsDev = config.env === "development";

module.exports = {
  // 启动 webpack 监听
  // watch: true,
  entry: getEntries(config),
  mode: config.env,
  output: {
    path: `${ROOT_PATH}/public/static/`,
    filename: 'js/[name].bundle.js',
    publicPath: '/static/',
  },
  /**
     * source-map:
     * 在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的source map，但是它会减慢打包速度
     * 
     * eval-source-map:
     * 使用eval打包源文件模块，在同一个文件中生成干净的完整的source map。
     * 这个选项可以在不影响构建速度的前提下生成完整的sourcemap，
     * 但是对打包后输出的JS文件的执行具有性能和安全的隐患。
     * 在开发阶段这是一个非常好的选项，在生产阶段则一定不要启用这个选项
     */
  // devtool: IsDev ? 'cheap-module-eval-source-map' : undefined,
  module: {
    rules: [
      {
        test: /\.(css|scss)$/, use: [{
          loader: MiniCssExtractPlugin.loader,
        }, {
          loader: "css-loader", options: {
            sourceMap: true
          }
        }, {
          loader: "postcss-loader",
        }, {
          loader: "sass-loader", options: {
            sourceMap: true
          }
        }]
      },
      {
        test: /\.less$/,
        use: [{
          loader: "style-loader" // creates style nodes from JS strings
        }, {
          loader: "css-loader" // translates CSS into CommonJS
        }, {
          loader: "less-loader", // compiles Less to CSS
          options: {
            javascriptEnabled: true
          }
        }]
      },
      {
        test: /\.(js|jsx)$/,
        use: [{
          loader: "babel-loader"
        }]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              // 使用图片的名字，并使用图片的后缀
              name: 'images/[name].[ext]',
              // 文件转换为base64字符串的文件大小限制
              limit: 10240
            },
          }
        ]
      }
      // { test: /\.jsx?$/, loaders: ['jsx-loader?harmony'] }
    ]
  },
  plugins: getPlugins(config),
};
